{extend name="layout" /}

{block name="style"}
<link rel="stylesheet" href="/assets/css/index.css">
{/block}

{block name="content"}
<!-- 轮播图 -->
{if condition="isset($sliders) && count($sliders) > 0"}
<section class="slider-section">
    <div id="mainSlider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            {volist name="sliders" id="slider" key="k"}
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="{$k-1}" class="{$k == 1 ? 'active' : ''}" aria-current="{$k == 1 ? 'true' : 'false'}" aria-label="Slide {$k}"></button>
            {/volist}
        </div>
        <div class="carousel-inner">
            {volist name="sliders" id="slider" key="k"}
            <div class="carousel-item {$k == 1 ? 'active' : ''}">
                <img src="{$slider.image ?? '/assets/images/placeholder/slider.jpg'}" class="d-block w-100" alt="{$slider.title ?? ''}" style="max-height: 600px; object-fit: cover;">
                {if condition="(isset($slider['title']) && $slider['title']) || (isset($slider['description']) && $slider['description'])"}
                <div class="carousel-caption d-none d-md-block" style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px;">
                    {if condition="isset($slider['title']) && $slider['title']"}
                    <h2>{$slider.title}</h2>
                    {/if}
                    {if condition="isset($slider['description']) && $slider['description']"}
                    <p>{$slider.description}</p>
                    {/if}
                    {if condition="isset($slider['link']) && $slider['link']"}
                    <a href="{$slider.link}" class="btn btn-light-custom">了解更多</a>
                    {/if}
                </div>
                {/if}
            </div>
            {/volist}
        </div>
        {if condition="count($sliders) > 1"}
        <button class="carousel-control-prev" type="button" data-bs-target="#mainSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
        {/if}
    </div>
</section>
{else /}
<!-- 英雄区（无轮播图时显示） -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content" data-aos="fade-right">
                <h1 class="hero-title">现代化内容管理系统</h1>
                <p class="hero-subtitle">基于ThinkPHP8构建的企业级CMS解决方案，助力您的数字化转型</p>
                <div class="hero-buttons">
                    <a href="/admin" class="btn btn-light-custom">立即体验</a>
                    <a href="/features.html" class="btn btn-outline-light-custom">了解更多</a>
                </div>
            </div>
            <div class="col-lg-6 text-center hero-image" data-aos="fade-left">
                <img src="/assets/images/placeholder/dashboard.svg" alt="CMS Dashboard">
            </div>
        </div>
    </div>
</section>
{/if}


<!-- 顶部广告 -->
{if condition="isset($top_ads) && count($top_ads) > 0"}
<section class="top-ads-section">
    <div class="container">
        <div class="row g-3">
            {volist name="top_ads" id="ad"}
            <div class="col-lg-{12 / min(count($top_ads), 3)} col-md-6" data-aos="fade-up" data-aos-delay="{$i * 100}">
                {if condition="isset($ad['link']) && $ad['link']"}
                <a href="{$ad.link}" target="_blank" class="top-ad-item" title="{$ad.title ?? ''}">
                    <img src="{$ad.image ?? '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?? ''}">
                </a>
                {else /}
                <div class="top-ad-item">
                    <img src="{$ad.image ?? '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?? ''}">
                </div>
                {/if}
            </div>
            {/volist}
        </div>
    </div>
</section>
{/if}

<!-- 核心特性 -->
<section class="features-section">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>核心特性</h2>
            <p>强大的功能，简洁的界面，助力您的内容管理</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-speedometer2"></i>
                    </div>
                    <h4>高性能</h4>
                    <p>基于ThinkPHP6框架，优化的数据库查询和缓存机制，确保系统高效运行</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h4>安全可靠</h4>
                    <p>多层安全防护，RBAC权限管理，敏感词过滤，保障系统和内容安全</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-phone"></i>
                    </div>
                    <h4>响应式设计</h4>
                    <p>完美支持PC、平板、手机等各种设备，随时随地管理您的内容</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-palette"></i>
                    </div>
                    <h4>多模板支持</h4>
                    <p>灵活的模板系统，支持多套主题切换，轻松定制您的网站外观</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-diagram-3"></i>
                    </div>
                    <h4>版本管理</h4>
                    <p>完整的内容版本控制，支持版本对比和回滚，永不担心误操作</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-search"></i>
                    </div>
                    <h4>SEO优化</h4>
                    <p>内置SEO优化功能，自定义TDK，友好的URL结构，提升搜索引擎排名</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 统计数据 -->
<section class="stats-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-item">
                    <span class="stat-number" data-count="10000">0</span>
                    <span class="stat-label">用户信赖</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-item">
                    <span class="stat-number" data-count="500">0</span>
                    <span class="stat-label">企业客户</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-item">
                    <span class="stat-number" data-count="99">0</span>
                    <span class="stat-label">客户满意度 %</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                <div class="stat-item">
                    <span class="stat-number" data-count="24">0</span>
                    <span class="stat-label">小时技术支持</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 应用案例 -->
<section class="showcase-section">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>应用案例</h2>
            <p>众多企业和组织选择我们的解决方案</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-corporate.svg" alt="企业官网" class="showcase-image">
                    <div class="showcase-content">
                        <h4>企业官网</h4>
                        <p>为大型企业提供品牌展示和产品宣传平台，提升企业形象</p>
                        <span class="showcase-tag">企业门户</span>
                        <span class="showcase-tag">品牌展示</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-news.svg" alt="新闻门户" class="showcase-image">
                    <div class="showcase-content">
                        <h4>新闻门户</h4>
                        <p>专业的新闻发布和内容管理系统，支持多渠道分发</p>
                        <span class="showcase-tag">新闻媒体</span>
                        <span class="showcase-tag">内容分发</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-ecommerce.svg" alt="电商平台" class="showcase-image">
                    <div class="showcase-content">
                        <h4>电商平台</h4>
                        <p>灵活的产品管理和内容营销解决方案，助力电商业务增长</p>
                        <span class="showcase-tag">电子商务</span>
                        <span class="showcase-tag">营销推广</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 友情链接 -->
{if condition="isset($links) && count($links) > 0"}
<section class="links-section" style="background: #f8f9fa; padding: 60px 0;">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>友情链接</h2>
            <p>携手共进，共创未来</p>
        </div>
        <div class="row g-4 justify-content-center">
            {volist name="links" id="link"}
            <div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center" data-aos="fade-up" data-aos-delay="{$i * 50}">
                <a href="{$link.url ?? '#'}" target="_blank" class="link-item" title="{$link.title ?? ''}" rel="nofollow">
                    {if condition="isset($link['logo']) && $link['logo']"}
                    <img src="{$link.logo}" alt="{$link.title}" class="link-logo">
                    {else /}
                    <div class="link-text">{$link.title ?? ''}</div>
                    {/if}
                </a>
            </div>
            {/volist}
        </div>
    </div>
</section>
{/if}

<!-- CTA -->
<section class="cta-section">
    <div class="container" data-aos="fade-up">
        <h2>准备开始了吗？</h2>
        <p>立即体验强大的内容管理系统，开启数字化转型之旅</p>
        <a href="/admin" class="btn btn-light-custom btn-lg">免费试用</a>
        <a href="/contact.html" class="btn btn-outline-light-custom btn-lg ms-3">联系我们</a>
    </div>
</section>

<!-- 侧边广告（固定在右侧，仅在大屏幕显示） -->
{if condition="isset($side_ads) && count($side_ads) > 0"}
<div class="side-ads-container">
    {volist name="side_ads" id="ad"}
    {if condition="isset($ad['link']) && $ad['link']"}
    <a href="{$ad.link}" target="_blank" class="side-ad-item" title="{$ad.title ?? ''}">
        <img src="{$ad.image ?? '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?? ''}">
    </a>
    {else /}
    <div class="side-ad-item">
        <img src="{$ad.image ?? '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?? ''}">
    </div>
    {/if}
    {/volist}
</div>
{/if}
{/block}

{block name="script"}
<script>
    // 数字动画
    function animateValue(element, start, end, duration) {
        let startTimestamp = null;
        const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp;
            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
            element.textContent = Math.floor(progress * (end - start) + start);
            if (progress < 1) {
                window.requestAnimationFrame(step);
            }
        };
        window.requestAnimationFrame(step);
    }

    // 监听统计数据区域进入视口
    const observerOptions = {
        threshold: 0.5
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                document.querySelectorAll('.stat-number').forEach(stat => {
                    const count = parseInt(stat.getAttribute('data-count'));
                    animateValue(stat, 0, count, 2000);
                });
                observer.disconnect();
            }
        });
    }, observerOptions);

    const statsSection = document.querySelector('.stats-section');
    if (statsSection) {
        observer.observe(statsSection);
    }
</script>
{/block}
